<template>
  <div class="wrapper">
    <div class="titleStyle">
      <span>
        基本信息
      </span>
    </div>
    <dev class="baseInfo">
      <el-descriptions :column="2">
        <el-descriptions-item label="接口名称">{{baseData.apiName}}</el-descriptions-item>
        <el-descriptions-item label="接口路径">
          <el-tag size="small">{{apiTypes[baseData.apiType]}}</el-tag> {{baseData.apiUrl}}
        </el-descriptions-item>
        <el-descriptions-item label="创建人">{{baseData.createUserName}}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{baseData.createTime}}</el-descriptions-item>
        <el-descriptions-item label="最后更新人">{{baseData.lastUpdateUserName}}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{baseData.updateTime}}</el-descriptions-item>
      </el-descriptions>
    </dev>
    <div class="titleStyle" v-if="remarks != '' && remarks != undefined">
      <span>
        备注
      </span>
    </div>
    <dev class="remarksStyle" v-if="remarks != '' && remarks != undefined">
      <span>{{remarks}}</span>
    </dev>
    <div class="titleStyle">
      <span>
        请求参数
      </span>
    </div>
    <dev class="titleItemStyle">
      <dev class="HeadersItem" v-if="headersData != undefined && headersData.length != 0">
        <span>Headers:</span>
        <el-table
            :data="headersData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            size="mini"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
              prop="key"
              label="参数名称">
          </el-table-column>
          <el-table-column
              prop="value"
              label="参数值">
          </el-table-column>
          <el-table-column
              prop="example"
              label="示例">
          </el-table-column>
          <el-table-column
              prop="remarks"
              label="备注">
          </el-table-column>
        </el-table>
      </dev>
      <dev class="QueryItem" v-if="queryData != undefined && headersData.length != 0">
        <span>Query:</span>
        <el-table
            :data="queryData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            size="mini"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
              prop="field"
              label="参数名称">
          </el-table-column>
          <el-table-column
              label="是否必须">
            <template slot-scope="scope">
              <span>{{ required[scope.row.required] }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="example"
              label="示例">
          </el-table-column>
          <el-table-column
              prop="remarks"
              label="备注">
          </el-table-column>
        </el-table>
      </dev>
      <dev class="BodyItem" v-if="queryData != undefined && headersData.length != 0">
        <span>Body:</span>
        <el-table
            v-if="selectRequestType == 1"
            :data="requestJsonData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            size="mini"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
              label="参数名称">
            <template slot-scope="scope">
              <span>{{ scope.row.field }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="类型">
            <template slot-scope="scope">
              <span>{{ fileTypes[scope.row.fieldType] }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="是否必须">
            <template slot-scope="scope">
              <span>{{ scope.row.required ? '必须' : '非必须' }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="remarks"
              label="备注">
          </el-table-column>
        </el-table>
        <el-table
            v-if="selectRequestType == 0"
            :data="formData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            size="mini"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
              label="参数名称">
            <template slot-scope="scope">
              <span>{{ scope.row.field }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="类型">
            <template slot-scope="scope">
              <span>{{ formFieldTypes[scope.row.fieldType] }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="是否必须">
            <template slot-scope="scope">
              <span>{{ required[scope.row.required] }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="example"
              label="示例">
          </el-table-column>
          <el-table-column
              prop="remarks"
              label="备注">
          </el-table-column>
        </el-table>
      </dev>
    </dev>
    <div class="titleStyle">
      <span>
        返回数据
      </span>
    </div>
    <el-table
        :data="responseJsonData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        size="mini"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          label="参数名称">
        <template slot-scope="scope">
          <span>{{ scope.row.field }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="类型">
        <template slot-scope="scope">
          <span>{{ fileTypes[scope.row.fieldType] }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="是否必须">
        <template slot-scope="scope">
          <span>{{ scope.row.required ? '必须' : '非必须' }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="remarks"
          label="备注">
      </el-table-column>
    </el-table>
    <div class="titleStyle">
      <span>
        评论区
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "OpenApiManage",
  data: function() {
    return {
      // 接口基础参数
      baseData: {
        apiName: '',
        apiClassify: '',
        apiType: 1,
        apiUrl: '',
        createUserName: '',
        updateTime: '',
        createTime: '',
        lastUpdateUserName: ''
      },
      // 备注
      remarks: '',
      // Query参数parameter
      queryData: [{
        id: 0,
        field: '',
        required: 0,
        example: '',
        remarks: ''
      }],
      // 请求头数据
      headersData: [
        {
          id: 0,
          key: '',
          value: '',
          example: '',
          remarks: ''
        }
      ],
      // 选择请求的类型,1json 0form
      selectRequestType: 1,
      // form表单的数据格式
      formData: [
        {
          id: 0,
          field: '',
          fieldType: 0,
          required: 0,
          example: '',
          remarks: ''
        }
      ],
      // form表单的类型
      formFieldTypes: {
        0: '文本',
        1: '文件'
      },
      // 请求的json参数
      requestJsonData: [{
        id: 1,
        field: 'root',
        required: true,
        fieldType: 3,
        remarks: null,
        disabled: true,
        append: false,
        children: []
      }],
      // 请求的json参数
      oldRequestJsonData: [{
        id: 1,
        field: 'root',
        required: true,
        fieldType: 3,
        remarks: null,
        disabled: true,
        append: false,
        children: []
      }],
      // 响应的json参数
      responseJsonData: [{
        id: 1,
        field: 'root',
        required: true,
        fieldType: 3,
        remarks: null,
        disabled: true,
        append: false,
        children: []
      }],
      oldResponseJsonData: [],
      // 接口类型
      apiTypes: {
        0: 'GET',
        1: 'POST',
        2: 'PUT',
        3: 'DELETE',
        4: 'HEAD',
        5: 'OPTIONS',
        6: 'PATCH'
      },
      required: {
        1: '是',
        0: '否'
      },
      // json参数类型
      fileTypes: {
        0: 'string',
        1: 'number',
        2: 'array',
        3: 'object',
        4: 'boolean',
        5: 'integer',
        10: 'string []',
        11: 'number []',
        12: 'array []',
        13: 'object []',
        14: 'boolean []',
        15: 'integer []',
        22: 'array [][]'
      }
    }
  },
  methods: {
    /**
     * 通过id查询详情
     */
    async getById() {
      let res = await this.$http.get('/api/apiManage/getById?id=' + this.$router.currentRoute.query.id)
      this.baseData.apiName = res.data.apiName
      this.baseData.apiClassify = res.data.apiClassify
      this.baseData.apiType = res.data.apiType
      this.baseData.apiUrl = res.data.apiUrl
      this.baseData.createUserName = res.data.createUserName
      this.baseData.lastUpdateUserName = res.data.lastUpdateUserName
      this.baseData.updateTime = res.data.updateTime
      this.baseData.createTime = res.data.createTime
      this.remarks = res.data.remarks
      this.queryData = res.data.queryParameter
      this.headersData = res.data.headers
      this.selectRequestType = res.data.requestBody.requestBodyType
      this.formData = res.data.requestBody.form
      this.oldRequestJsonData = res.data.requestBody.json
      this.requestJsonData = this.formatJsonData(res.data.requestBody.json)
      this.oldResponseJsonData = res.data.response
      this.responseJsonData = this.formatJsonData(res.data.response)
      if (this.selectRequestType == 0) {
        let node = {
          id: new Date().getTime(),
          key: 'Content-Type',
          value: 'application/x-www-form-urlencoded'
        }
        if (this.headersData == undefined) {
          this.headersData = []
        }
        this.headersData.unshift(node)
      } else {
        let node = {
          id: new Date().getTime(),
          key: 'Content-Type',
          value: 'application/json'
        }
        if (this.headersData == undefined) {
          this.headersData = []
        }
        this.headersData.unshift(node)
      }
    },
    formatJsonData(jsonData) {
      if (jsonData[0].fieldType == 3) {
        jsonData = jsonData[0].children
      }else if (jsonData[0].fieldType == 2) {
        jsonData[0].field = ''
        jsonData[0].fieldType = jsonData[0].children[0].fieldType + 10
        if (jsonData[0].children[0].fieldType == 3) {
          jsonData[0].children = jsonData[0].children[0].children
        } else if (jsonData[0].children[0].fieldType == 2) {
          jsonData[0].children = this.formatJsonData(jsonData[0].children)
        } else {
          jsonData[0].children = undefined
        }
      }else {
        return
      }
      return this.formatJsonArray0(jsonData)
    },
    formatJsonArray0(jsonData) {
      if (jsonData == undefined) {
        return
      }
      let that = this
      jsonData.forEach(function(item, index) {
        if (item.children != undefined && item.children.length == 0) {
          item.children = null
          that.$delete(item,'children')
          item.hasChildren = false
        } else {
          item.children = that.formatJsonArray0(item.children)
        }
        if (item.fieldType == 2) {
          item.fieldType = item.children[0].fieldType + 10
          item.children = that.formatJsonData(item.children)
        }
      })
      return jsonData
    }
  },
  activated() {
    this.getById()
  }
}
</script>

<style lang="scss" scoped>
.titleStyle{
  border-left: 3px solid #409EFF;
  padding: 5px;
  margin-top: 8px;
  margin-bottom: 8px;
  span{
    font-size: 16px;
    color: #303133;
  }
}
.el-descriptions{
  margin-left: 50px;
  margin-right: 50px;
}
.remarksStyle{
  font-size: 14px;
  color: #606266;
  margin-left: 50px;
  margin-right: 50px;
}
.titleItemStyle{
  font-size: 14px;
  color: #606266;
}
</style>
